<template>
	<view>
		<cu-custom :key="'header'+headerKey" bgColor="bg-gradual-red-yellow" :isBack="true" backText="返回" :title="headerTitle"></cu-custom>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback" @up="upCallback">
			<view class="comment" v-if="showComment" style="padding-bottom: 110rpx;">
				<comment-item   v-for="(item,index) in commentList" :key="index" :info="item" @reply="reply($event)"></comment-item>
			</view>
		</mescroll-body>
		<view class="cu-load load-modal" v-if="showPageLoading">
			<image src="/static/logo.png" mode="aspectFit"></image>
			<view class="gray-text">加载中...</view>
		</view>
		<view class="cu-bar foot-zh input" style="height: 110rpx;padding-right:0rpx">
			<view @tap="comment" class="round" style="width: 100%;height: 70rpx;margin: 0 30rpx 0 30rpx;background-color: #f2f2f2;color: #999999;display: flex;align-items: center;" >
				<text style="margin-left: 38rpx;">发表评论</text>
			</view>
		</view>
		<uni-popup  ref="addComment" @close="closeComment" type="bottom">
			<view class="add-comment">
				<view class="info">
					<view class="input">
						<textarea
							:cursor-spacing="20"
							:show-confirm-bar="false"
							:auto-height="true"
							:fixed="true"
							:maxlength="200"
							:focus="addCommentFocus"
							v-model.trim="commentContent"
							placeholder-class="input-placeholder-class"
							:placeholder="replyFlag? '回复 ' + parentNikeName + '：' : '发表评论'"
						/>
					</view>
					<view class="add">
						<button class="cu-btn bg-gradual-red-yellow round" @click="addCommentOrReply()" style="width: 150rpx;">{{ replyCommentId > 0 ? '回复' : '发表' }}</button>
					</view>
				</view>
			</view>
		</uni-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import api from '@/api/system/article.js';
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	
export default {
	mixins: [MescrollMixin],
	onShow() {
		this.headerKey += 1;
	},
	data() {
		return {
			headerKey:0,
			headerTitle:'全部评论',
			articleId:null,
			commentCount:0,
			commentList:[],
			downOption: {
				use:true,
				auto: true //是否在初始化后,自动执行downCallback; 默认true
			},
			// 上拉加载的配置(可选, 绝大部分情况无需配置)
			upOption: {
				page: {
					size: 10 // 每页数据的数量,默认10
				},
				noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
				empty: {
					use : true ,
					icon : null , 
					tip: '暂无评论，快来抢占沙发吧~'
				}
			},
			showPageLoading: true,
			btnText:'发表',
			addCommentFocus: false,
			commentContent:'',
			replyFlag:false,
			parentNikeName:'匿名',
			parentCommentId:null,
			replyId:null,
			showComment:false
		};
	},
	onLoad(option) {
		if(option.articleId){
			this.articleId=option.articleId
		}
		if(option.commentCount){
			this.commentCount=option.commentCount
			if(this.commentCount>0){
				this.headerTitle = '全部评论('+this.commentCount+')'
			}
		}
	},
	methods: {
		/*下拉刷新的回调 */
		downCallback() {
			//联网加载数据
			this.showComment = false
			this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
		},
		/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
		upCallback(page) {
			//联网加载数据
			const data={}
			data.pageNum=page.num
			data.pageSize=page.size
			this.getCommentList(data)
		},
		getCommentList(data){
			data.articleId=this.articleId
			data.replyFlag='0'
			this.$http.post(api.getCommentList, data).then(res => {
				this.showComment = true
				this.showPageLoading = false
				//联网成功的回调,隐藏下拉刷新的状态
				const result = res.result
				//设置列表数据
				if(this.mescroll.num == 1) {
					this.commentList = []; //如果是第一页需手动置空列表
				}
				this.commentList=this.commentList.concat(result.list);
				//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
				const hasNextPage = result.hasNextPage
				this.mescroll.endSuccess(result.size,hasNextPage);
				
				// 如果数据较复杂,可等到渲染完成之后再隐藏下拉加载状态: 如
				this.$nextTick(()=>{
					this.mescroll.endSuccess(result.size)
				})
				
			}).catch(error => {
				//联网失败的回调,隐藏下拉刷新的状态
				this.showPageLoading = false
				this.mescroll.endErr();
			})
		},
		reply(e){
			if(!this.replyFlag){
				this.replyFlag = true
				this.commentContent = ''
			}else{
				if(this.replyId!=e.commentId){
					this.commentContent = ''
				}
			}
			if(e.parentCommentId){
				this.parentCommentId = e.parentCommentId
			}else{
				this.parentCommentId = e.commentId
			}
			this.parentNikeName = e.nikeName?e.nikeName:'匿名'
			this.replyId = e.commentId
			this.openAddComment()
		},
		comment(){
			if (this.replyFlag) {
				this.commentContent = ''
				this.replyFlag = false
			}
			this.openAddComment()
		},
		/*初始化添加评论*/
		openAddComment() {
			this.$refs.addComment.open()
			setTimeout(() => {
				this.addCommentFocus = true;
			}, 200);
		},
		closeComment(){
			this.commentContent = ''
			console.log(this.replyFlag)
			if (this.replyFlag) {
				this.replyFlag = false
				this.parentNikeName = '匿名'
			}
			this.addCommentFocus = false
		},
		/*添加评论或回复*/
		addCommentOrReply() {
			if (!this.commentContent||this.commentContent == '') {
				this.$refs.uToast.show({
					title: '发表内容不能为空',
					// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
					type: 'warning', 
					position:'top',
					// 如果不需要图标，请设置为false
					icon: false
				})
				return;
			}
			this.addComment();
		},
		
		/*添加评论*/
		addComment() {
			const data={}
			data.articleId=this.articleId
			if(this.replyFlag){
				data.replyFlag='1'
			}else{
				data.replyFlag='0'
			}
			data.commentContent = this.commentContent
			data.parentCommentId = this.parentCommentId
			data.replyId = this.replyId
			this.$http.post(api.addComment, data).then(res => {
				this.$refs.addComment.close()
				this.closeComment()
				this.downCallback()
			}).catch(error => {
				
			})
		}
	}
};
</script>

<style scoped lang="scss">
.comment {
	padding: 0 30rpx;
	background: #fff;
}
.add-comment {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: #ffffff;
	z-index: 9999;
	.info {
		display: flex;
		flex-direction: row;
		padding: 20rpx 20rpx 20rpx 20rpx;
		.input {
			flex-grow: 1;
			flex-shrink: 1;
			display: flex;
			align-items: center;
			background: #f2f2f2;
			border-radius: 40rpx 40rpx 0 40rpx;
			padding: 20rpx 32rpx 20rpx;
			line-height: normal;
			textarea {
				//padding: 10rpx 0;
				width: 100%;
				font-size: 28rpx;
				line-height: 42rpx;
				background: #f2f2f2;
			}
		}
		.add {
			flex-grow: 0;
			flex-shrink: 0;
			width: 150rpx;
			display: flex;
			align-items: center;
			margin-left: 10rpx;
		}
		
	}
}
.input-placeholder-class {
	color: $uni-text-color-placeholder;
	font-size: 28rpx;
}
</style>
